<!DOCTYPE html>
<html>
<head>
  <title>PDF文字识别</title>
  <meta charset="utf-8"/>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      background-color: #f5f5f5;
      color: #333;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 800px;
      margin: 30px auto;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      position: relative;
    }
    h1 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 30px;
    }
    .upload-area {
      border: 2px dashed #3498db;
      border-radius: 5px;
      padding: 30px;
      text-align: center;
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s;
    }
    .upload-area:hover {
      background-color: #f0f8ff;
      border-color: #2980b9;
    }
    .upload-area.active {
      background-color: #e1f0fa;
      border-color: #2980b9;
    }
    #imagePreview {
      max-width: 100%;
      max-height: 300px;
      margin: 20px auto;
      display: none;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    #imageFile {
      display: none;
    }
    button {
      background-color: #3498db;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #2980b9;
    }
    button:disabled {
      background-color: #95a5a6;
      cursor: not-allowed;
    }
    .result-container {
      margin-top: 30px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    .result-title {
      font-weight: bold;
      margin-bottom: 10px;
      color: #2c3e50;
    }
    #resultText {
      width: 100%;
      min-height: 200px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: white;
      font-family: inherit;
      resize: vertical;
    }
    #resultText:focus {
      outline: none;
      border-color: #3498db;
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
    .loading {
      text-align: center;
      padding: 20px;
    }
    .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border-left-color: #3498db;
      animation: spin 1s linear infinite;
      margin: 0 auto 10px;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .tips {
      font-size: 14px;
      color: #7f8c8d;
      margin-top: 20px;
      padding: 10px;
      background-color: #ecf0f1;
      border-radius: 5px;
    }
    .error-message {
      color: #e74c3c;
      margin-top: 20px;
      padding: 10px;
      background-color: #fadbd8;
      border-radius: 5px;
      text-align: center;
    }
    .action-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    .upload-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 10px;
    }
    .upload-text {
      margin: 5px 0;
    }
    .nav-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }

    .top-right-menu button {
      padding: 8px 15px;
      font-size: 14px;
    }

    .top-right-menu {
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      gap: 10px;
    }
    .top-right-menu a {
      background-color: #2ecc71;
      color: white;
      text-decoration: none;
      padding: 8px 15px;
      border-radius: 5px;
      font-size: 14px;
      transition: background-color 0.3s;
    }
    .top-right-menu a:hover {
      background-color: #27ae60;
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 右上角功能菜单 -->
  <div class="top-right-menu">
    <a href="index.html">返回首页</a>
  </div>

  <h1>PDF文字识别</h1>

  <div class="upload-area" id="uploadArea">
    <svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
      <polyline points="17 8 12 3 7 8"></polyline>
      <line x1="12" y1="3" x2="12" y2="15"></line>
    </svg>
    <p class="upload-text">点击或拖拽PDF文件到此处上传</p>
    <p class="upload-text"><small>仅支持PDF格式（不超过5MB）</small></p>
    <input type="file" id="imageFile" accept=".pdf, application/pdf">
  </div>

  <div class="nav-buttons">
    <button id="recognizeBtn" disabled>识别文字</button>
  </div>

  <div class="tips">
    <p><strong>使用提示：</strong></p>
    <ul>
      <li>请确保PDF文件清晰可读</li>
      <li>仅支持PDF文档中的文字识别</li>
      <li>PDF中照片中的文字无法识别</li>
      <li>为保护隐私，识别完成后请及时清除信息</li>
      <li>识别结果可手动编辑修正</li>
    </ul>
  </div>

  <div class="error-message" id="errorMessage" style="display: none;"></div>

  <div class="result-container" id="resultContainer" style="display: none;">
    <div class="result-title">识别结果</div>
    <textarea id="resultText" placeholder="识别结果将显示在这里..."></textarea>
    <div class="action-buttons">
      <button id="copyBtn" style="background-color: #2ecc71;">复制文本</button>
      <button id="clearBtn" style="background-color: #e74c3c;">清除信息</button>
    </div>
  </div>

  <div class="loading" id="loading" style="display: none;">
    <div class="spinner"></div>
    <p>正在识别文字，请稍候...</p>
  </div>
</div>

<script>
  // 获取DOM元素
  const uploadArea = document.getElementById('uploadArea');
  const imageFile = document.getElementById('imageFile');
  const recognizeBtn = document.getElementById('recognizeBtn');
  const resultContainer = document.getElementById('resultContainer');
  const resultText = document.getElementById('resultText');
  const loading = document.getElementById('loading');
  const errorMessage = document.getElementById('errorMessage');
  const copyBtn = document.getElementById('copyBtn');
  const clearBtn = document.getElementById('clearBtn');

  // 点击上传区域触发文件选择
  uploadArea.addEventListener('click', () => {
    imageFile.click();
  });

  // 拖拽功能
  uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('active');
  });

  uploadArea.addEventListener('dragleave', () => {
    uploadArea.classList.remove('active');
  });

  uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('active');

    if (e.dataTransfer.files.length) {
      imageFile.files = e.dataTransfer.files;
      handleFileSelection();
    }
  });

  // 文件选择变化
  imageFile.addEventListener('change', handleFileSelection);

  function handleFileSelection() {
    // 隐藏之前的结果和错误
    resultContainer.style.display = 'none';
    errorMessage.style.display = 'none';

    if (imageFile.files && imageFile.files[0]) {
      const file = imageFile.files[0];
      const validTypes = ['application/pdf'];

      // 验证文件类型
      if (!validTypes.includes(file.type)) {
        showError('请上传PDF格式的文件');
        return;
      }

      // 验证文件大小 (5MB)
      if (file.size > 5 * 1024 * 1024) {
        showError('文件大小超过5MB限制');
        return;
      }

      // 验证通过，启用识别按钮
      recognizeBtn.disabled = false;
    }
  }

  // 显示错误信息
  function showError(message) {
    errorMessage.textContent = message;
    errorMessage.style.display = 'block';
    recognizeBtn.disabled = true;
  }

  // 隐藏错误信息
  function hideError() {
    errorMessage.style.display = 'none';
  }

  // 识别按钮点击事件
  recognizeBtn.addEventListener('click', async () => {
    if (!imageFile.files.length) return;

    const formData = new FormData();
    formData.append('file', imageFile.files[0]);

    // 显示加载中，隐藏结果和错误
    loading.style.display = 'block';
    resultContainer.style.display = 'none';
    hideError();

    try {
      const response = await fetch('/ocr/PDFToText', {
        method: 'POST',
        body: formData
      });

      const data = await response.json();

      // 隐藏加载中
      loading.style.display = 'none';

      if (response.ok) {
        if (data.status === 'error') {
          showError(data.text || '识别失败');
        } else {
          // 显示识别结果
          resultText.value = data.text || data.texts?.join('\n') || '未识别到文字';
          resultContainer.style.display = 'block';
        }
      } else {
        showError(data.text || '识别失败: 未知错误');
      }
    } catch (error) {
      loading.style.display = 'none';
      showError('请求失败: ' + error.message);
    }
  });

  // 复制按钮点击事件
  copyBtn.addEventListener('click', () => {
    resultText.select();
    document.execCommand('copy');

    // 显示复制成功提示
    const originalText = copyBtn.textContent;
    copyBtn.textContent = '已复制!';
    setTimeout(() => {
      copyBtn.textContent = originalText;
    }, 2000);
  });

  // 清除按钮点击事件
  clearBtn.addEventListener('click', () => {
    // 清除文件选择
    imageFile.value = '';
    recognizeBtn.disabled = true;

    // 清除结果
    resultText.value = '';
    resultContainer.style.display = 'none';

    // 清除错误信息
    hideError();
  });
</script>
</body>
</html>